import { observer } from 'mobx-react'
import './../../styles/appleBasket.scss'
import AppleItem from './../AppleItem/AppleItem';
import { useRootStore } from './../../store/root.store'

function AppleBasket () {
    const { AppleStore } = useRootStore();

    return  <div className="appleBusket">
    <div className="title">苹果篮子</div>
   
    <div className="stats">
        <div className="section">
            <div className="head">当前</div>
            <div className="content"> {AppleStore.status.appleNow.quantity} 个 苹果，{AppleStore.status.appleNow.weight} 克
            </div>
        </div>
        <div className="section">
            <div className="head">已吃掉</div>
            <div className="content"> {AppleStore.status.appleEaten.quantity} 个苹果，{AppleStore.status.appleEaten.weight}  克</div>
        </div>
    </div>

    <div className="appleList">
        {
           renderAppleItem(AppleStore.showApple)
        }
    </div>

    <div className="btn-div">
        <button className={AppleStore.isPicking ? 'disabled' : ''}  onClick={() => AppleStore.getAnApple()} > { AppleStore.isPicking ? '正在采摘...' : '摘苹果' } </button>
    </div>
</div>
}

function renderAppleItem(apples) {
    if(apples && apples.length > 0) {
        return (
            apples.map(apple => (
                <AppleItem apple={apple} key={apple.id}  />
            ))
        )
    } else {
        return <div className="empty-tip">篮子空空如也</div>;
    }
}


export default observer(AppleBasket)
